<script setup lang="tsx">
import type { ISchema } from '@pkgs/components/business/ui-form-search/type'
import type { IState } from './type'
import { ButtonOperationType } from '@apps/_share/enums'
import useMicroStore from '@apps/_share/store/micro'
import { RouteName } from '@auth/enums'
import DetailDrawer from './components/detail-drawer.vue'
import {
  columns,
  schemas,
} from './config'

defineOptions({ name: RouteName.userAdmin })

const baseTableRef = ref()
const state = reactive<IState>({
  detailDrawerVisible: false,
  schemas,
  tableData: [
    {
      id: '1',
      projectName: 'admin',
      projectCode: '123456789',
      typeName: '-',
      status: 1,
      statusName: '开启',
      createName: '五老星1号',
      createTime: '2024-10-24 12:00:00',
      modifyName: '五老星2号',
      modifyTime: '2024-10-25 10:10:20',
      apps: [{
        id: 1,
        name: '权限中心',
        code: 'auth',
      }, {
        id: 2,
        name: '配置中心',
        code: 'config',
      }, {
        id: 3,
        name: '翻译中心',
        code: 'translate',
      }],
    },
    {
      id: '2',
      projectName: 'admin2',
      projectCode: '123456789',
      typeName: '-',
      status: 1,
      statusName: '开启',
      createName: '五老星1号',
      createTime: '2024-10-24 12:00:00',
      modifyName: '五老星2号',
      modifyTime: '2024-10-25 10:10:20',
      apps: [{
        id: 1,
        name: '权限中心',
        code: 'auth',
      }, {
        id: 2,
        name: '配置中心',
        code: 'config',
      }, {
        id: 3,
        name: '翻译中心',
        code: 'translate',
      }],
    },
  ],
  currentRow: null,
  pagination: {
    page: 1,
    size: 20,
    total: 10,
  },
  userType: 'userId',
})

const { $t } = useMicroStore()

function onSearch(model: any) {
  console.log({ model })
}

function onReset(model: any) {
  console.log({ model })
}

function onAdd() {
  console.log(111111)
}

function onEdit(type: ButtonOperationType, row: any) {
  state.currentRow = row
  state.detailDrawerVisible = true
}

function onUserTypeChange(type: string, schema: ISchema) {
  console.log({
    type,
    schema,
  })
  schema.field = type
}

function handleSelectionChange(selection: any[]) {
  console.log({ selection })
}

// setTimeout(() => {
//   baseTableRef.value.elTable.clearSelection()
// }, 5000)
</script>

<template>
  <UiPageListContainer>
    <template #search>
      <UiFormSearch
        :schemas="state.schemas"
        @reset="onReset"
        @search="onSearch"
      >
        <template #user-title="{ schema }">
          <div class="flex items-center">
            <BaseSelect
              v-model="state.userType"
              class="min-w-75px"
              :clearable="false"
              :options="[
                { label: '用户名', value: 'username' },
                { label: '用户ID', value: 'userId' },
              ]"
              @change="(type: string) => onUserTypeChange(type, schema)"
            />:
          </div>
        </template>

        <template #status-icon>
          <ElTooltip
            effect="dark"
            content="我是提示"
            placement="bottom"
          >
            <ElIcon><QuestionFilled /></ElIcon>
          </ElTooltip>
        </template>
      </UiFormSearch>
    </template>

    <template #operation>
      <ElSpace wrap>
        <ElButton
          type="primary"
          @click="onAdd"
        >
          {{ $t('新增') }}
        </ElButton>
      </ElSpace>
    </template>

    <template #table>
      <BaseTable
        ref="baseTableRef"
        row-key="id"
        :columns="columns"
        :data="state.tableData"
        @selection-change="handleSelectionChange"
      >
        <template #domains="{ row }">
          <div
            v-for="domain in row.domains"
            :key="domain.env"
          >
            <span>{{ domain.envName }}: </span>
            <span>{{ domain.url }}</span>
          </div>
        </template>

        <template #operation="{ row }">
          <ElSpace
            wrap
            :size="16"
            class="pt-8px pb-8px"
          >
            <ElButton
              link
              type="primary"
              size="small"
              @click="onEdit(ButtonOperationType.DETAIL, row)"
            >
              {{ $t('权限') }}
            </ElButton>

            <!-- <ElButton
              link
              type="primary"
              size="small"
              @click="onEdit(ButtonOperationType.DETAIL, row)"
            >
              {{ $t('详情') }}
            </ElButton> -->

            <ElButton
              link
              type="primary"
              size="small"
              @click="onEdit(ButtonOperationType.EDIT, row)"
            >
              {{ $t('编辑') }}
            </ElButton>

            <ElButton
              link
              type="primary"
              size="small"
            >
              {{ $t('删除') }}
            </ElButton>
          </ElSpace>
        </template>
      </BaseTable>
    </template>

    <template #pagination>
      <BasePagination
        v-if="state.pagination.total > 0"
        v-model:page="state.pagination.page"
        v-model:size="state.pagination.size"
        :total="state.pagination.total"
      />
    </template>
  </UiPageListContainer>

  <DetailDrawer
    v-model:visible="state.detailDrawerVisible"
    v-model:item="state.currentRow"
  />
</template>
